<script setup>
import { ref,reactive,computed,watch,watchEffect } from "vue";
defineProps({
	move:Object,
	hover:Boolean
})
const emits=defineEmits(["allMouseenter","allMouseout"])
function allMouseenter(){
	emits("allMouseenter")
}
function allMouseout(){
	emits("allMouseout")
}

</script>


<template>

<div class="terminalsBox">
	<div class="terminalsMove" :class="{hover:move.current==='terminals'||move.current==='all'||hover}"
	@mousedown="move.mousedown('terminals')">
		<div class="allMove" @mousedown.stop="move.mousedown('all')"
		@mouseenter="allMouseenter" @mouseout="allMouseout"></div>
	</div>
	<div class="terminals">
		<div class="tabs">
			<div class="tab">
				控制台
			</div>
			<div class="tab tab_active">
				未命名
			</div>
		</div>
		<div class="terminals_input">
			20:01:39 [vite] hmr update /src/view/home.vue?vue&type=style&index=1&scoped=true&lang.css (x8)   ite] hmr update /src/view/home.vue?vue&type=style&index=1&scoped=true&lang.css (x8)   ite] hmr update /src/view/home.vue?vue&type=style&index=1&scoped=true&lang.css (x8)   ite] hmr update /src/view/home.vue?vue&type=style&index=1&scoped=true&lang.css (x8)   
			20:02:09 [vite] hmr update /src/view/home.vue?vue&type=style&index=1&scoped=true&lang.css (x9)   
			20:02:20 [vite] hmr update /src/view/home.vue?vue&type=style&index=1&scoped=true&lang.css (x10)  
			20:02:25 [vite] hmr update /src/view/home.vue
			20:02:45 [vite] hmr update /srchmr update /src/view/home.vue?vue&type=style&index=1&scoped=true&lang.css (x8)   ite] hmr update /src/view/home.vue?vue&type=style&index=1&scoped=true&lang.css (x8)   ite] hmr update /src/view/home.vue?vue&type=style&index=1&scoped=true&lang.css (x8)   ite] hmr update /src/view/home.vue?vue&type=style&index=1&scoped=true&lang.css (x8)   
			20:02:09 [vite] hmr update /src/view/home.vue?vue&type=style&index=1&scoped=true&lang.css (x9)   
			20:02:20 [vite] hmr update /src/view/home.vue?vue&type=style&index=1&scoped=true&lang.css (x10)  
			20:02:25 [vite] hmr update /src/view/home.vue
			20:02:45 [vite] hmr update /srchmr update /src/view/home.vue?vue&type=style&index=1&scoped=true&lang.css (x8)   ite] hmr update /src/view/home.vue?vue&type=style&index=1&scoped=true&lang.css (x8)   ite] hmr update /src/view/home.vue?vue&type=style&index=1&scoped=true&lang.css (x8)   ite] hmr update /src/view/home.vue?vue&type=style&index=1&scoped=true&lang.css (x8)   
			20:02:09 [vite] hmr update /src/view/home.vue?vue&type=style&index=1&scoped=true&lang.css (x9)   
			20:02:20 [vite] hmr update /src/view/home.vue?vue&type=style&index=1&scoped=true&lang.css (x10)  
			20:02:25 [vite] hmr update /src/view/home.vue
			20:02:45 [vite] hmr update /src/view/home.vue?vue&type=style&index=1&scoped=true&lang.css  
		</div>
	</div>
</div>

</template>


<style scoped>

.terminalsBox{
	height: calc( var(--terminals-height) );
	color: #fff;
	position: relative;
}
.terminals{
	height:100%;
	background-color: #1e1e1e;
	overflow: hidden;
}
.terminalsMove{
	position: absolute;
	height: var(--terminals-move-height);
	width:100%;
	cursor: s-resize;
	transition: background-color .3s;
	top: calc( var(--terminals-move-height) /-2 );
    left: 0;
}

.terminalsMove:hover{
	background-color: #007acc;
}
.hover{
	background-color: #007acc;
}

.allMove{
	width: calc( var(--dir-move-width) * 2);
	height: calc( var(--terminals-move-height) * 2);
	cursor: move;
	position: absolute;
	top: calc(var(--terminals-move-height)*-0.5);
    left: calc(var(--dir-move-width)*-1);
}

.tabs{
	border-top: 1px solid #414141;
	color: #979797;
	display: flex;
	flex-direction: row;
	height: 3em;
	line-height: 3em;
}
.tab{
	cursor: pointer;
	margin:0 1em;
}
.tab_active{
	color: #fff;
	border-bottom: 4px solid #fff;
}
.terminals_input{
	height: calc( 100% - 42px );
	padding:0 1em;
	color: #fff;
	overflow-y: scroll;
}
.terminals_input::-webkit-scrollbar{/*整个滚动条  https://m.php.cn/article/480425.html*/
    width: .8em;
    background-color: transparent;
}
.terminals:hover .terminals_input::-webkit-scrollbar-thumb{/*滚动条*/
	display: block;
}
.terminals_input::-webkit-scrollbar-thumb{/*滚动条*/
	transition: all 5s;
	display: none;
    background-color:rgb(72, 72, 72);
}

</style>